$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  
  .news_page {
    width: 65vw;
    margin: 10vw auto 5vw auto;
    .links {
      margin-bottom: 10px;
      a {
        display: flex;
        align-items: center;

        p {
          color: #B2B2B2;
          font-size: $fontSize_16;
        }
      }
    }
    .t {
      color: #333;
      font-size: $fontSize_32;
      text-align: center;
    }

    .time {
      color: #9B9B9B;
      font-size: $fontSize_14;
      text-align: center;
      margin: 10px 0 2vw 0;
    }

    .html {
      border-top: 1px solid #79C536;
      color: #666;
      font-size: $fontSize_18;
      padding: 1.5vw 0;
      line-height: 1.8;

      img {
        max-width: 100%;
        object-fit: contain;
      }
    }

    .related {
      width: 100%;
      margin: 4vw 0;

      .st {
        text-align: center;
        color: #333;
        font-size: $fontSize_32;
        font-weight: 600;
      }

      .allNews {
        width: 100%;
        margin-top: 2vw;
        .swiper-container {
          width: 100%;
          padding: 10px 0;
          a {
            background: #FFF;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
            display: block;
            width: calc(95% - 2vw);
            margin: 0 auto;
            padding: 1vw;
            .time2{
              color: #999;
              font-size: $fontSize_16;
            }
            .pt{
              color:rgba(51, 51, 51, 1);
              font-size: $fontSize_22;
              margin-top: 5px;
              transition: all 600ms;
            }
            .more{
              display: flex;
              align-items: center;
              margin-top: 1.5vw;
              p{
                color: #666;
                font-size: $fontSize_16;
                margin-right: 5px;
                transition: all 600ms;
              }
              svg {
                path {
                  transition: all 600ms;
                }
              }
            }
            &:hover{
              .pt{
                color: #79C536;
              }
              .more {
                p {
                  color: #79C536;
                }
  
                svg {
                  path {
                    fill: #79C536;
                  }
                }
              } 
            }
          }
        }
      }
      .sets{
        width: 90%;
        display: flex;
        align-items: center;
        margin: 3vw auto;
        justify-content: space-between;
        .swiper-scrollbar{
          background: rgba(34, 34, 34, 0.10);
          height: 2px;
          width: 80%;
          .swiper-scrollbar-drag{
            width:20%;
            background-color: #24B658;
          }
        }
        .btns{
          display: flex;
          align-items: center;
          div{
            cursor: pointer;
            img{
              display: block;
            }
          }
          .next{
            margin-left: 1vw;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .news_page{
      width: 90%;
      margin: 30px auto;
      .links{
        a{
          p{
            font-size: 14px;
          }
        }
      }
      .t{
        font-size: 18px;
      }
      .time{
        font-size: 16px;
        margin: 5px 0 15px 0;
      }
      .html{
        font-size: 16px;
        padding: 15px 0;
      }
      .related{
        .st{
          font-size: 18px;
        }
        .allNews{
          .swiper-container{
            a{
              padding: 15px;
              margin: 0 auto;
              width: calc(95% - 30px);
              .time2{
                font-size: 14px;
              }
              .pt{
                font-size: 16px;
              }
              .more{
                p{
                  font-size: 14px;
                  margin-right: 8px;
                }
              }
            }
          }
        }
        .sets{
          .btns{
            .next{
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}